<template>
  <div class="dx-menu-lists">
    <div class="dx-header-container">
      <div><i class="dx-layer" /><span>监测数据</span></div>
      <div>
        <i
          class="menu-contraction el-icon-s-unfold"
          @click="menuContraction"
        ></i>
        <router-link
          tag="i"
          :to="{ name: 'Dashboard' }"
          class="el-icon-close"
        />
      </div>
    </div>
<!-- MonitoringDisplay/${item.type} -->
    <div class="menu-lists-body">
      <router-link
        v-for="item in dataList"
        :key="item.id"
        tag="div"
        :to="{ path: `/` }"
      >
        <div class="tools-icon" :style="{ backgroundColor: item.bc }">
          <i :class="item.icon" />
        </div>
        <span>{{ item.name }}</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import DataOptions from "./dataOptions";

export default {
  name: "MenuLists",
  data() {
    return {
      dataList: DataOptions.fieldMenuLits,
      activeID: "",
    };
  },
  mounted() {
    this.activeID = this.$route.query.type || null;
  },
  methods: {
    menuContraction() {
      this.$store.commit("app/updataMeunBar", true);
    },
  },
  watch: {
    $route: {
      handler(val, oldval) {
        this.activeID = val.query.type;
        // this.proData;
        // if (val.query.type !== oldval.query.type) {
        //   this.initDiaplayPage();
        // }
      },
      // 深度观察监听
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.active-menu {
  box-shadow: 0 0 4px #fff, 0 0 2px #fff inset;
  border-radius: 4px;
}
</style>
